<template>
  <div class="quitApproval">
    <div class="contLeft">
      <el-card>
        <h2>申请请假</h2>
        <div class="maincontent">
          <img src="@/assets/common/img.jpeg" alt="">
          <div>
            <p><strong>{{ overtimeList.username }}</strong></p>
            <p><span>部门：{{ overtimeList.departmentName }}</span></p>
            <p><span>入职时间：{{ overtimeList.timeOfEntry | formatDate }}</span></p>
          </div>
        </div>
        <hr>
        <div class="content">
          <p><span>补偿方式： </span> 调休 </p>
          <p><span>加班开始时间： </span> {{ overtimeList.data.start_time }} </p>
          <p><span>加班结束时间： </span> {{ overtimeList.data.end_time }} </p>
          <p><span>申请原因： </span>  {{ overtimeList.data.reason }} </p>
        </div>
      </el-card>
    </div>
    <div class="contRit">
      <el-card>
        <h4>审批记录</h4>
        <div>
          <li v-for="(item,index) in records" :key="index" class="process">
            <!-- 时间 -->
            <p class="time">{{ item.handleTime | formatDate }}</p>
            <div class="line">
              <!-- 小圆圈 -->
              <div class="circle" />
              <!-- 竖线 -->
              <div class="br" :style="index==records.length-1?'border-right:none':''" />
              <!-- 发起人 -->
              <strong class="initiator">{{ item.handleUserName }}</strong>
              <!-- 审批流程 -->
              <span v-if="index==0">发起申请</span>
              <span v-else-if="item.handleType==1">未开始</span>
              <span v-else-if="item.handleType==2">审批通过</span>
              <span v-else-if="item.handleType==3">审批驳回</span>
              <span v-else-if="item.handleType==4">已撤销</span>
              <span v-else>审批中</span>
            </div>
          </li>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getApprovalDetail, getApprovalTasks } from '@/api/approvals'
export default {
  data() {
    return {
      processId: this.$route.params.id,
      overtimeList: {
        data: {}
      },
      records: []
    }
  },
  mounted() {
    this.getApprovalDetail()
  },
  methods: {
    async getApprovalDetail() {
    //   console.log(this.processId)
      this.overtimeList = await getApprovalDetail(this.processId)
      this.overtimeList.data = JSON.parse(this.overtimeList.procData)
      console.log(this.overtimeList.data)
      this.records = await getApprovalTasks(this.processId)
      console.log(this.records)
    }
  }
}
</script>

<style lang="scss" scoped>
.quitApproval {
  .contLeft {
    margin-right: 0;
    h2 {
      color: #555555;
    }
    .maincontent {
        display: flex;
      img {
        width: 100px;
        height: 100px;
        margin-right: 20px;
      }
    }
  }
  .contRit {
    font-size: 14px;
    list-style: none;
    padding: 20px 5px;
    // height: 745px;
    ::v-deep .el-card__body {
      height: 745px;
    }
    .process {
      display: flex;
      align-items: center;
      .line {
        position: relative;
        display: flex;
        align-items: center;
        .circle {
          width: 12px;
          height: 12px;
          background-color: #fff;
          border: 2px solid #5eb641;
          border-radius: 50%;
          margin-left: 10px;
          margin-right: 5px;
        }
        .br {
          position: absolute;
          left: -33px;
          top: 13px;
          width: 50px;
          height: 50px;
          border-right: 1px solid #ccc;
        }
      }
      .time,
      .initiator {
        margin-right: 5px;
      }
    }

  }
}
</style>
